<template>

	<div id="main">
	</div>
</template>

<script>
	import echarts from 'echarts'

	export default {
	  name: "JTree",
	  mounted() {
	    this.Draw1();
	  },
	  methods: {
	    Draw1() {
		  const myChart = echarts.init(document.getElementById('main'));
		  //document.getElementById('main')可以更换为this.$el
	     var option = {
	     	    title : {
	     	        text: '吃水果统计表',
	     	    },
	     	    tooltip : {
	     	        trigger: 'item',
	     	        formatter: "{b}: {c}"
	     	    },
	     	    toolbox: {
	     	        show : true,
	     	        feature : {
	     	            mark : {show: true},
	     	            dataView : {show: true, readOnly: false},
	     	            restore : {show: true},
	     	            saveAsImage : {show: true}
	     	        }
	     	    },
	     	    calculable : false,
	     	    series : [
	     	        {
	     	            name:'矩形图',
	     	            type:'treemap',
	     	            itemStyle: {
	     	                normal: {
	     	                    label: {
	     	                        show: true,
	     	                        formatter: "{b}"
	     	                    },
	     	                    borderWidth: 1
	     	                },
	     	                emphasis: {
	     	                    label: {
	     	                        show: true
	     	                    }
	     	                }
	     	            },
	     	            data:[
							{
							    name: '火龙果',
							    value: 2,
								children: [{
								                name: '红心火龙果',       // First leaf of first tree
								                value: 1
								            }, {
								                name: '白心火龙果',       // Second leaf of first tree
								                value: 1
								            }]
							},
	     	                {
	     	                    name: '苹果',
	     	                    value: 6
	     	                },
	     	                {
	     	                    name: '香蕉',
	     	                    value: 4
	     	                },
	     	                {
	     	                    name: '猕猴桃',
	     	                    value: 4
	     	                },
							{
							    name: '瓜类',
							    value: 6,
								children: [{
								                name: '西瓜',       // First leaf of first tree
								                value: 3
								            }, {
								                name: '哈密瓜',       // Second leaf of first tree
								                value: 3
								            }]
							},
							{
							    name: '樱桃',
							    value: 3
							},
	     	                {
	     	                    name: '梨',
	     	                    value: 2
	     	                },
	     	                {
	     	                    name: '橙子',
	     	                    value: 2
	     	                },
	     	                {
	     	                    name: '桔子',
	     	                    value: 1
	     	                },

	     	            ]
	     	        }
	     	    ]
	     	};

	     	myChart.setOption(option);
	     }



	  }
	}
</script>

<style>
 #main {
   width: 800px;
   height: 600px;
 }
</style>
